/**
 * Created by zhouli on 19/6/29
 */
import React from 'react';
import {connect} from 'react-redux';
import {Icon, Select} from 'antd';
import {messages} from 'share/common';
import 'styles/data-center/report/travel-report/components/currency-select-for-report/currency-select-for-report.scss';
import ListSelector from 'components/list-selector'

class CurrencySelectForReport extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      selectedData: [],//选择的数据
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      selectedData: []
    }, () => {
      this.props.onConfirm(undefined)
    })
  }

  showModal = () => {
    this.setState({visible: true})
  }
  //
  handleChangeCurrency = (result) => {
    this.setState({visible: false});
    if (result && result.result.length > 0) {
      this.setState({
        selectedData: result.result
      }, () => {
        this.props.onConfirm(result.result[0].currencyCode)
      })
    }
  };

  //渲染值
  renderVauleText = () => {
    let {selectedData} = this.state;
    let {setOfBooksId} = this.props;
    if (setOfBooksId && selectedData.length > 0) {
      return selectedData[0].currencyName;
    } else if (selectedData.length === 0) {
      if (setOfBooksId) {
        return messages('data-center.key27')/*请选择*/;
      } else {
        return messages('data-center.key29')/*请先选择账套*/;
      }
    }
  };
  closeListSelectorCurrency = () => {
    this.setState({visible: false})
  };
  //渲染值后面的关闭icon class
  renderVauleClass = () => {
    let {selectedData} = this.state;
    let {setOfBooksId} = this.props;
    let class_name1 = "f-right select-dep-close-wrap";
    let class_name2 = "f-right select-dep-close-wrap select-dep-close-wrap-show";
    if (setOfBooksId && selectedData.length > 0) {
      return class_name2;
    } else if (selectedData.length === 0) {
      return class_name1;
    }
  };
  onMouseLeaveDepTag = (e) => {
    e.stopPropagation();
  };
  onMouseEnterDepTag = (e) => {
    e.stopPropagation();
  };
  //清除已经选择的成本中心
  onCloseDepTag = (e) => {
    e.stopPropagation();
    this.setState({
      selectedData: [],
    }, () => {
      this.props.onCancel(undefined);
    })
  };

  render() {
    let {setOfBooksId, title} = this.props;
    let {visible} = this.state;
    let inputClassName = setOfBooksId ? "input" : "input input-disabled";
    return (
      <div className="currency-select-for-report">
        <div>
          <div className="label-text">
            {title}:
          </div>
          <div className="input-wrap">
            <div className={inputClassName}
                 onClick={setOfBooksId && this.showModal}>
              {this.renderVauleText()}
            </div>
            <div className={this.renderVauleClass()}
                 onMouseLeave={this.onMouseLeaveDepTag}
                 onMouseEnter={this.onMouseEnterDepTag}
                 onClick={this.onCloseDepTag}>
              <Icon type="close-circle" className="closeCircle"/>
            </div>
          </div>
        </div>
        {/*通过账套查询币种*/}
        <ListSelector
          type="currency_by_setofbooks"
          visible={visible}
          extraParams={{enabled: true, language: 'zh_cn', setOfBooksId: setOfBooksId}}
          onOk={this.handleChangeCurrency}
          onCancel={this.closeListSelectorCurrency}
          single
        />
      </div>
    );
  }
}

CurrencySelectForReport.propTypes = {
  onConfirm: React.PropTypes.func.isRequired,// 点击确认之后的回调：返回结果
  onCancel: React.PropTypes.func.isRequired,//点击取消的时候
  title: React.PropTypes.any.isRequired,//字段标题
  setOfBooksId: React.PropTypes.any,//账套id，需要有账套id查询成本中心
};

CurrencySelectForReport.defaultProps = {
  title: messages('common.currency')/*币种*/,//由外面传入
  setOfBooksId: null,
};

function mapStateToProps(state) {
  return {
    profile: state.login.profile,
    user: state.login.user,
    tenantMode: state.main.tenantMode,
    company: state.login.company,
  }
}

export default connect(mapStateToProps)(CurrencySelectForReport);



